<template>
    <div id="printCallRecords" ref="callBosMain">
      <div class="title">
        <span class="line"></span>
        <span><i style="font-size:15px !important;" class="iconfont icon-tonghuajilu"></i> VPN: {{sendData.label}}</span>
      <!-- <el-button style="float:right;margin-left:10px;margin-right:10px;margin-top:6px;color:#fff;" type="text" @click="openPrintModel"><i class="el-icon-printer"></i> {{$t('wechat.dayinSms')}}</el-button> -->
      </div>
      <el-tabs v-model="activeName" type="card"  :stretch="true">
        <el-tab-pane  label="VPN信息" name="first">
            <!-- <div style="padding:10px">
                VPN名称：{{sendData.label}}
                <br>
                VPN路径：{{sendData.url}}
            </div> -->
            <el-descriptions v-if="sendData.url!==''" title="" direction="vertical" :column="1" border>
                <el-descriptions-item label="VPN名称">
                    {{sendData.label}}
                </el-descriptions-item>
                <el-descriptions-item label="URL">{{ sendData.url }}</el-descriptions-item>
            </el-descriptions>
            <div v-else style="margin-top:300px;text-align:center;" >暂无数据</div>
            
        </el-tab-pane>
        <el-tab-pane v-if="tableData" label="详情" name="second">
            <el-table
                :data="tableData"
                height="670"
                border
                style="width: 100%">
                <el-table-column
                prop="appname"
                label=""
                >
                <template slot-scope="scope" >
                  
                        <div>
                        VPN名称：{{ scope.row.appname }}
                        </div>
                        <div>
                            组名称：{{scope.row.groupName}}
                        </div>
                        <div>
                            配置名称：{{scope.row.profileName}}
                        </div>
                        <div>
                            可选地址：{{scope.row.selection}}
                        </div>
                </template>

                </el-table-column>
                <!-- <el-table-column
                prop="groupName"
                label="小组名称"
                width="180">
                </el-table-column>
                <el-table-column
                prop="profileName"
                label="地址">
                </el-table-column>
                <el-table-column
                prop="selection"
                label="地址">
                </el-table-column> -->
            </el-table>
            <div class="block">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="offset"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="10"
                layout="total, prev, pager, next, jumper"
                :total="total">
                </el-pagination>
            </div>
        </el-tab-pane>
        <el-tab-pane label="Node节点" name="third">
            <el-table
                :data="nodeDataList"
                height="700"
                border
                style="width: 100%">
                <el-table-column
                prop="appname"
                label=""
                >
                <template slot-scope="scope" >
                    <div style="padding: 0 20px;">
                        <div>
                            app名称：{{scope.row.appname?scope.row.appname:'暂无'}}
                        </div>
                        <div>
                        名称：{{ scope.row.name?scope.row.name:'暂无' }}
                        </div>
                        <div>
                            网络：{{scope.row.network?scope.row.network:'暂无'}}
                        </div>
                        <div>
                            协议：{{scope.row.protocol?scope.row.protocol:'暂无'}}
                        </div>
                        <div>
                            网络主机：{{scope.row.ws_host?scope.row.ws_host:'暂无'}}
                        </div>
                        <div>
                            shadowsocks地址：{{scope.row.shadowsocks_address?scope.row.shadowsocks_address:'暂无'}}
                        </div>
                        <div>
                            shadowsocks方法：{{scope.row.shadowsocks_method?scope.row.shadowsocks_method:'暂无'}}
                        </div>
                        <div>
                            shadowsocks密码：{{scope.row.shadowsocks_password?scope.row.shadowsocks_password:'暂无'}}
                        </div>
                        <div>
                            shadowsocks端口：{{scope.row.shadowsocks_port?scope.row.shadowsocks_port:'暂无'}}
                        </div>
                        <div>
                            socks地址：{{scope.row.socks_address?scope.row.socks_address:'暂无'}}
                        </div>
                        <div>
                            socks密码：{{scope.row.socks_password?scope.row.socks_password:'暂无'}}
                        </div>
                        <div>
                            socks端口：{{scope.row.socks_port?scope.row.socks_port:'暂无'}}
                        </div>
                        <div>
                            socks用户：{{scope.row.socks_user?scope.row.socks_user:'暂无'}}
                        </div>
                        <div>
                            url：{{scope.row.url?scope.row.url:'暂无'}}
                        </div>
                        <div>
                            socks地址：{{scope.row.vmess_address?scope.row.vmess_address:'暂无'}}
                        </div>
                        <div>
                            vmess_alterid：{{scope.row.vmess_alterid?scope.row.vmess_alterid:'暂无'}}
                        </div>
                        <div>
                            vmess端口：{{scope.row.vmess_port?scope.row.vmess_port:'暂无'}}
                        </div>
                        <div>
                            vmess_security：{{scope.row.vmess_security?scope.row.vmess_security:'暂无'}}
                        </div>
                        <div>
                            vmess_uuid：{{scope.row.vmess_uuid?scope.row.vmess_uuid:'暂无'}}
                        </div>
                    </div>
                       
                </template>

                </el-table-column>
            </el-table>
            <!-- <div class="block">
                <el-pagination
                @size-change="nodehandleSizeChange"
                @current-change="nodehandleCurrentChange"
                :current-page="nodeoffset"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="10"
                layout="total, prev, pager, next, jumper"
                :total="nodeTotal">
                </el-pagination>
            </div> -->
        
        </el-tab-pane>
    </el-tabs>
  
    </div>
  </template>
  
  <script>
  import print from 'print-js'
  import html2canvas from "html2canvas"
  import { getCallRecordsApi,searchWord  } from '@/api/baseInfo/base_api'
  import { parseTime } from "@/utils/index"
  import { sendMarkOrderApi,getUserCallRe } from '@/api/markApi/index'
  import { throttle } from 'lodash';
  
  import ScreenShort from "js-web-screen-shot";
  import { detalisVpnApi,vpnNodeApi } from "@/api/vpn/index"
  
  export default {
    name: "vpn1",
    props:['sendData'],
    data() {
      return {
        activeName:'first',
        closeLoadingData:false,
        offset:1,
        limit:10,
        nodeoffset:1,
        nodelimit:10,
        show:true,
        showNode:true,
        tableData:[],
        nodeDataList:[],
        total:0,
        nodeTotal:0
      };
    },
    watch: {
      "$store.state.account.vpn1": function () {
        this.activeName = 'first';
        this.tableData = [];
        this.nodeDataList = [];
        this.offset=1;
        this.limit=20;
        this.total = 0;
        this.nodeTotal = 0;
        this.initVpnDetails();
        this.initVpnNode();
      },
    },
    created(){
        this.initVpnDetails();
        this.initVpnNode();
    },
    methods:{
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.offset = val;
            this.initVpnDetails();
        },
        nodehandleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        nodehandleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.offset = val;
            this.initVpnNode();
        },
        initVpnDetails(){
            let data = {
                proof_num:sessionStorage.getItem('proof_num'),
                apptype:this.sendData.class,
                account_id:String(this.sendData.account_id),
                APP_NAME:this.sendData.class,
                profileName:this.sendData.label,
                offset:this.offset,
                limit:this.limit
            }
            detalisVpnApi(data).then(res=>{
                console.log(res)
                this.tableData = res.data;
                if(res.data.length > 0) {
                    this.total = res.data[0].cnt
                }
             
            })
        },
        initVpnNode(){
            let data = {
                proof_num:sessionStorage.getItem('proof_num'),
                APP_NAME:this.sendData.class,
                account_id:String(this.sendData.account_id)
            }
            vpnNodeApi(data).then(res=>{
              this.nodeDataList = res.data;
              if(res.data.length > 0) {
                    this.nodeTotal = res.data[0].cnt
                }
            })
        }
    }
  };
  </script>
  
  <style scoped>
  .loadingBoxbottom{
    width: 100%;
    text-align: center;
    margin-top: 20px;
  }
  .callInfoB{
    height: 40px;
    width: 90%;
    border-bottom: 1px solid #f1f1f1;
    line-height: 40px;
    display: flex;
    align-items: center;
    margin: 0 auto;
    /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
  }
  .blackCall{
    height: 30px;
    display: flex;
    align-items: center;
    border-bottom:1px solid #e5e5e5;
    cursor: pointer;
    margin-bottom: 10px;
  }
  .callRecordListItem{
    height: 60px;
    border-bottom: 1px solid #e5e5e5;
    padding: 0 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 17px 119px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    position: relative;
    background: #fff;
  }
  /* .callRecordListItem:hover{
    background: #ececec;
  } */
  .badgeBox{
    width: 50px;
    height: 23px;
    border-radius: 10px;
    color: #fff;
    background: #f56c6c;
    text-align: center;
    line-height: 23px;
    font-size: 12px;
  }
  .title {
    width: 100%;
    height: 50px;
    background: #2b2f3a;
    margin-bottom: 10px;
    line-height: 50px;
    padding-left: 20px;
    color: #fff;
  }
  .line {
    width: 8px;
    height: 100%;
  }
  .mainContentBox {
    padding: 0 10px;
    height: 90%;
    overflow-y: auto;
    padding-bottom:100px;
  }
  .mainContentBox::-webkit-scrollbar {
    width: 10px;
  }
  /* <!--修改 滚动条的 下面 的 样式--> */
  .mainContentBox::-webkit-scrollbar-track {
    background-color: rgb(252, 252, 252);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }
  /* <!--修改 滑块 --> */
  .mainContentBox::-webkit-scrollbar-thumb {
    background-color: #c0c0c0;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }
  </style>
  